<template>
<div class="page_list" ref="page_list" v-loading='loading' element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="正在加载">
  <search @change='change'/>
  <div class="zhan"></div>
  <van-pull-refresh class="refresh_div" v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      class="list_div"
      @load="onLoad"
    >
      <div class="flex_w project_div">
        <div class="item" v-for="(item,index) in list" :key="index" @click="toPro(item.id)">
          <div class="see_div">
            <img class="img" :src="item.thumb||'https://bigdataapi.parkic.com./static/images/dasdsafsaf.jpg'" mode="widthFix"/>
            <div class="see">
              <img class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/see.png" mode="widthFix"/>{{item.read_num}}
              <img class="see_img m_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fx_icon.png" mode="widthFix"/>{{item.share_num}}
            </div>
          </div>
          <div class="city_name" v-if="item.chain_names">{{item.chain_names.split(',')[0]||''}}</div>
          
          <div class="park_name">{{item.name}}</div>
          <div class="add">
            <div class="add_item now">
              <img class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode="widthFix"/>{{item.city_name}}
            </div>
            <div class="now">{{item.create_time}}</div>
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
  <back />
</div>
</template>
<script>
import search from '../components/search.vue'
import back from '../components/back.vue'
import {localprojects} from '@/api/api'
export default {
  components: { search,back },
  data(){
    return{
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      query:{
        keywords:'',
        chain_id:'',
        city_id:'',
        page:0
      },
      top:0
    }
  },
  created(){

  },
  activated(){
    this.$refs.page_list.scrollTop =  this.top 
  },
  methods:{
    onLoad(){
      this.query.page += 1
      this.loading = true
      localprojects.getList(this.query).then(res=>{
        if(res.data.length==0){
          this.loading = false
          this.finished = true
          this.refreshing = false
          this.list = []
          return
        }
        if(this.query.page==1){
          this.list = res.data.data
        }else{
          this.list = this.list.concat(res.data.data)
        }
        this.loading = false
        this.refreshing=false
        if(res.data.per_page<=this.query.page){
          this.finished = true
        }
      })
    },
    change(query){
      this.finished = false
      this.query = query
      this.query.page = 0
      this.list = []
      this.onLoad()
    },
    onRefresh() {
      this.finished = false;
      this.query.page = 0
      this.onLoad();
    },
    toPro(id){
      this.top = this.$refs.page_list.scrollTop
      this.$router.push({name:'zs_proDetail',query:{id}})
    }
  }
}
</script>
<style lang="scss" scoped>
.zhan{
  height: 100px;
  width: 100%;
}
.m_b4{
  margin-bottom: 4px;
  margin-top: 4px;
}
.page_list{
  height: 100%;
  overflow: auto;
  background: #f3f3f3;
}
.project_div{
  position: relative;
  padding-bottom: 80px;
  padding-top: 10px;
  background: #fff;
  .item{
    position: relative;
    width: calc(50% - 20px);
    margin: 0 10px;
    margin-bottom:18px;
    .img{
      width:100%;
      height: 100px;
      border-radius: 6px;
      margin: 0;
      object-fit: cover;
    }
  }
  .city_name{
    position: absolute;
    top:8px;
    left: -5px;
    padding: 5px;
    font-size: 14px;
    background: #FA6400;
    border-radius: 4px;
    color: #fff;
  }
  .park_name{
    height: 22px;
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 5px;
  }
  .see_div{
    position: relative;
    width: 100%;
  }
  .see{
    display: flex;
    color: #fff;
    font-size: 12px;
    position: absolute;
    left: 0px;
    bottom: 6px;
    width: 100%;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 0 0 14rpx 14rpx;
    align-items: center;
  }
  .see_img{
    width: 14px;
    margin-right: 2px;
  }
  .m_left{
    margin-left: 10px;
  }
  .add{
    display: flex;
    justify-content: space-between;
    color: #999999;
    font-size: 12px;
    padding-right: 5px;
    margin-top: 5px;
    align-items: center;
  }
  .add_item{
    display: flex;
    align-items: center;
  }
  .now{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>